<template>
    <div>
        <el-form :model="form" :rules="rules" ref="form" v-loading="loading">
            <el-form-item prop="name" label="课程名" label-width="80px">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="teacherId" label="授课教师" label-width="80px">
                <el-select v-model="form.teacherId" placeholder="请选择教师">
                    <el-option v-for="item in teachers" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="grade" label="年级" label-width="80px">
                <el-input v-model="form.grade" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="when" label="上课时间" label-width="80px">
                <el-select v-model="weekId" placeholder="请选择星期">
                    <el-option v-for="item in weekDays" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="lectureId" placeholder="请选择第几节">
                    <el-option v-for="item in lectureIndex" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="timeLength" label="时常(节)" label-width="80px">
                <el-input v-model="timeLength" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="location" label="上课地点" label-width="80px">
                <el-input v-model="form.location" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="credit" label="学分" label-width="80px">
                <el-input v-model="form.credit" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="maxSize" label="最大容量" label-width="80px">
                <el-input v-model="form.maxSize" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="examLocation" label="考试地点" label-width="80px">
                <el-input v-model="form.examLocation" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="examDate" label="考试时间" label-width="80px">
                <el-date-picker v-model="form.examDate" type="datetime" placeholder="选择日期时间"
                    value-format="yyyy-MM-DD HH:mm">
                </el-date-picker>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end;">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </div>
    </div>
</template>

<script>
import { courseEdit, courseInfo, teacherName } from '@/api/admin/course';
export default {
    props: ["editId"],
    data() {
        return {
            dialogFormVisible: false,
            form: {
                credit: "",
                examLocation: "",
                examDate: "",
                grade: "",
                location: "",
                number: "",
                name: "",
                teacherId: "",
                time: "",
                maxSize: "",
                id: -1
            },
            loading: false,
            weekId: "",
            lectureId: "",
            timeLength: "",
            teachers: [],
            weekDays: [
                { name: "星期一", id: "1" },
                { name: "星期二", id: "2" },
                { name: "星期三", id: "3" },
                { name: "星期四", id: "4" },
                { name: "星期五", id: "5" },
                { name: "星期六", id: "6" },
                { name: "星期日", id: "7" }
            ],
            lectureIndex: [
                { name: "第一节", id: "1" },
                { name: "第二节", id: "2" },
                { name: "第三节", id: "3" },
                { name: "第四节", id: "4" },
                { name: "第五节", id: "5" },
                { name: "第六节", id: "6" },
                { name: "第七节", id: "7" },
                { name: "第八节", id: "8" },
                { name: "第九节", id: "9" },
                { name: "第十节", id: "10" }
            ],
            rules: {
                number: [
                    { required: true, message: "请输入课程编号", trigger: 'blur' },
                    { pattern: /^\d{12}$/, message: "课程编号必须为12位数字", trigger: 'blur' }
                ],
                name: [
                    { required: true, message: "请输入课程名称", trigger: 'blur' }
                ],
                teacherId: [
                    { required: true, message: "请选择授课教师", trigger: 'change' }
                ],
                grade: [
                    { required: true, message: "请输入年级", trigger: 'blur' },
                    { pattern: /^(19[6-9]\d|2\d{3}|2999)$/, message: "年级必须在1960-2999之间", trigger: 'blur' }
                ],
                weekId: [
                    { required: true, message: "请选择上课星期", trigger: 'change' }
                ],
                lectureId: [
                    { required: true, message: "请选择上课节次", trigger: 'change' }
                ],
                time: [
                    { required: true, message: "请输入课程时长", trigger: 'blur' },
                    { pattern: /^\d+$/, message: "时长必须为正整数", trigger: 'blur' }
                ],
                place: [
                    { required: true, message: "请输入上课地点", trigger: 'blur' }
                ],
                credit: [
                    { required: true, message: "请输入学分", trigger: 'blur' },
                    { pattern: /^\d+(\.\d{1,2})?$/, message: "学分请输入数字（最多2位小数）", trigger: 'blur' }
                ],
                maxSize: [
                    { required: true, message: "请输入最大容量", trigger: 'blur' },
                    { pattern: /^\d+$/, message: "最大容量必须为正整数", trigger: 'blur' }
                ],
                examLocation: [
                    { required: true, message: "请输入考试地点", trigger: 'blur' }
                ],
                examDate: [
                    { required: true, message: "请输入选择考试时间", trigger: 'blur' }
                ],
                password: [
                    { required: true, message: "请输入课程密码", trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        getList() {
            this.loading = true
            courseInfo(this.editId).then(res => {
                console.log(res)
                this.form = res.data
                let time = res.data.time
                // console.log(examDate);
                this.weekId = time.split("-")[0]
                this.lectureId = time.split("-")[1]
                this.timeLength = time.split("-")[2]
            }).finally(() => {
                this.loading = false
            })
        },
        formatTime() {
            if (this.weekId && this.lectureId && this.timeLength) {
                this.form.time = `${this.weekId}-${this.lectureId}-${this.timeLength}`;
            }
        },
        getTeacher() {
            teacherName().then(res => {
                // console.log(res)
                this.teachers = res.data
            })
        },
        submit() {

            this.$refs["form"].validate(f => {
                if (f) {
                    courseEdit(this.form).then(res => {
                        console.log(this.form.time)
                        if (res.code === 0) {
                            this.$message({
                                type: "success",
                                message: res.data
                            })
                            this.$emit("close")
                        }
                    }).catch(err => {
                        console.log(err)
                        this.$message({
                            type: "error",
                            message: "课程编号不能重复"
                        })
                    })
                }
            })
        },
        cancel() {
            this.$emit("cancelAdd")
        }
    },
    watch: {
        // 监听星期变化，更新 time
        'weekId': function () {
            this.formatTime();
        },
        // 监听节次变化，更新 time
        'lectureId': function () {
            this.formatTime();
        },
        'timeLength': function () {
            this.formatTime();
        }
    },
    mounted() {
        this.getTeacher()
        this.getList()
    }
}
</script>